<template>
  <el-dialog :close-on-click-modal="false"
             :visible.sync="dialogShow"
             width="500px"
             :before-close="preHandleClose">
    <common-title>{{title}}</common-title>
    <div style="display: flex;">
      <span class="g-mr10">上传文件：</span>
      <div>
        <el-upload ref="upload"
                   :auto-upload="false"
                   :data="otherParams"
                   :before-upload="beforeUpload"
                   :on-success="successUploadCallback"
                   :on-remove="remove"
                   :on-change="handleChange"
                   :file-list="fileList"
                   :limit="limit"
                   :on-exceed="exceed"
                   :accept="'.'+accept.join(',.')"
                   class="upload-demo"
                   :action="target">
          <el-button type="primary"
                     size="small">上传文件</el-button>
          <div class="el-upload__tip"
               slot="tip">支持{{accept.join('、')}}，单个文件不超过10M，最多上传{{limit}}个文件</div>
        </el-upload>
      </div>
    </div>
    <span slot="footer"
          class="dialog-footer">
      <el-button @click="preHandleClose"
                 size="small">关闭</el-button>
      <el-button @click="submit"
                 type="primary"
                 size="small">确认</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  name: 'dialogUpload',
  props: {
    // 文件类型，用以区分是哪个地方的导入，值对应mapFilePath中的文件地址
    fileType: {
      type: Array
    },
    // 文件上传地址
    target: String,
    title: {
      type: String,
      default: '导入'
    },
    accept: Array,
    limit: {
      type: Number,
      default: 1
    },
    uploadParams: Object
  },
  mixins: [],
  components: {},
  data () {
    return {
      dialogShow: false,
      fileList: [],
      otherParams: { }
    }
  },
  watch: {
    dialogShow: function (n, o) {
      if (n) this.init()
    }
  },
  methods: {
    init () {
      this.fileList = []
    },
    preHandleClose () {
      this.init()
      this.dialogShow = false
    },
    submit (file, fileList) {
      this.$refs.upload.submit()
    },
    beforeUpload (file, fileList) {
      const overnumber = this.fileList.length < this.limit
      const oversize = file.size / 1024 / 1024 < 10
      let isSingle = true
      let isCorrectFormat = false
      this.otherParams = Object.assign(this.otherParams, this.uploadParams)
      this.accept.map(item => {
        if (file.name.indexOf(`.${item}`) !== -1) isCorrectFormat = true
      })
      this.fileList.map(item => {
        if (item.name === file.name) isSingle = false
      })
      if (!overnumber) {
        this.$message.error(`最多上传${this.limit}个文件`)
      }
      if (!oversize) {
        this.$message.error('单个文件大小不能超过 10MB')
      }
      if (!isCorrectFormat) {
        this.$message.error(`仅支持${this.accept.join('、')}格式的文件`)
      }
      if (!isSingle) {
        this.$message.error('该文件已上传')
      }
      return overnumber && oversize && isSingle && isCorrectFormat
    },
    handleChange (file, fileList) {
      console.log()
    },
    successUploadCallback (res) {
      if (!res.status && !res.success) {
        this.$message.error(res.message)
      } else {
        // this.$message.success(this.title + '成功！')
        this.$emit('callback', res)
      }
    },
    remove (file, fileList) { },
    exceed (files, fileList) {
      this.$message.error(`最多上传${this.limit}个文件`)
    }
  }
}
</script>
<style lang='less' scoped>
</style>
